$com: ".dialog";

@keyframes upToDown {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

@mixin button-reset($sel) {
  #{$sel} {
    display: inline-block;
    border: none;
    padding: .5rem 1rem;
    margin: 0;
    text-decoration: none;
    background: var(--el-color-primary);
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out,
    transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  #{$sel}:hover,
  #{$sel}:focus {
    background: var(--el-color-primary-light-2);
  }

  #{$sel}:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
  }

  #{$sel}:active {
    transform: scale(0.99);
  }
}

:host {
  --dialog-inner-top: 0;
  --dialog-body-padding: 1rem 2rem;
}

#{$com} {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  //&:after {
  //  content: '';
  //  background: rgba(0,0,0, 0.5);
  //  position: absolute;
  //  left: 0;
  //  top: 0;
  //  width: 100%;
  //  height: 100%;
  //  opacity: 0;
  //}
  background: rgba(0,0,0, 0);
  z-index: -111111;
  //display: none;
  //transition: opacity .5s ease, z-index .5s ease 1s;
  opacity: 0;
  overflow: hidden;
  &-body {
    padding: var(--dialog-body-padding);
    height: 80vh;
    overflow: auto;
  }
}


.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dialog-inner {
  background-color: #ffffff;
  margin: 0 auto;
  position: relative;
  top: 0;
  z-index: 11;
  pointer-events: all;
  box-shadow: 0 0 10px #d5d5d5;
}

.dialog--opened {
  //display: block;
  z-index: var(--my-dialog-z-index, 1111);
  opacity: 1;
  //&:after {
  //  opacity: 1;
  //}
  background: rgba(0,0,0, 0.5);

  transition: background-color ease .5s;
}

.dialog--opened .dialog-inner {
  top: var(--dialog-inner-top);
  animation: upToDown 1s;
  padding: var(--dialog-inner-padding);
}

.dialog--no-modal {
  background-color: transparent;
  pointer-events: none;
}

@include button-reset($com + '-close')
